<template>
  <div class="test-poptip">
    <h1>Poptip 气泡提示</h1>
    <p>Poptip 与 Tooltip 类似，具有很多相同配置，不同点是 Poptip 以卡片的形式承载了更多的内容，比如链接、表格、按钮等。</p>
    <p>Poptip 还 confirm 确认框，与 Modal 不同的是，它会出现在就近元素，相对轻量。</p>
    <h2>基础用法</h2>
    <div>
      <Poptip trigger="hover" title="提示标题" content="提示内容">
        <Button>Hover激活</Button>
      </Poptip>
      <Poptip title="Title" content="提示内容">
        <Button>Click激活</Button>
      </Poptip>
      <Poptip trigger="focus" title="提示标题" content="提示内容">
        <Button>Focus激活</Button>
      </Poptip>
      <Poptip trigger="focus" title="提示标题" content="提示内容">
        <Input placeholder="输入框的 focus"/>
      </Poptip>
    </div>
    <p>支持三种触发方式：鼠标悬停、点击、聚焦。默认是点击。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
          &lt;Poptip trigger=&quot;hover&quot; title=&quot;提示标题&quot; content=&quot;提示内容&quot;&gt;
            &lt;Button&gt;hover激活&lt;/Button&gt;
          &lt;/Poptip&gt;
          &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot;&gt;
            &lt;Button&gt;click激活&lt;/Button&gt;
          &lt;/Poptip&gt;
          &lt;Poptip trigger=&quot;focus&quot; title=&quot;提示标题&quot; content=&quot;提示内容&quot;&gt;
            &lt;Button&gt;focus激活&lt;/Button&gt;
          &lt;/Poptip&gt;
          &lt;Poptip trigger=&quot;focus&quot; title=&quot;提示标题&quot; content=&quot;提示内容&quot;&gt;
            &lt;Input placeholder=&quot;输入框的 focus&quot;&gt;&lt;/Input&gt;
          &lt;/Poptip&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {

            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>位置</h2>
    <div>
      <div class="top">
        <Poptip title="提示标题" content="提示内容" placement="top-start">
          <Button>上左</Button>
        </Poptip>
        <Poptip title="提示标题" content="提示内容" placement="top">
          <Button>上边</Button>
        </Poptip>
        <Poptip title="提示标题" content="提示内容" placement="top-end">
          <Button>上右</Button>
        </Poptip>
      </div>
      <div class="center">
        <div class="center-left">
          <Poptip title="提示标题" content="提示内容" placement="left-start">
              <Button>左上</Button>
            </Poptip><br><br>
            <Poptip title="提示标题" content="提示内容" placement="left">
              <Button>左边</Button>
            </Poptip><br><br>
            <Poptip title="提示标题" content="提示内容" placement="left-end">
              <Button>左下</Button>
            </Poptip>
        </div>
        <div class="center-right">
          <Poptip title="提示标题" content="提示内容" placement="right-start">
              <Button>右上</Button>
            </Poptip><br><br>
            <Poptip title="提示标题" content="提示内容" placement="right">
              <Button>右边</Button>
            </Poptip><br><br>
            <Poptip title="提示标题" content="提示内容" placement="right-end">
              <Button>右下</Button>
            </Poptip>
        </div>
      </div>
      <div class="bottom">
        <Poptip title="提示标题" content="提示内容" placement="bottom-start">
          <Button>下左</Button>
        </Poptip>
        <Poptip title="提示标题" content="提示内容" placement="bottom">
          <Button>下边</Button>
        </Poptip>
        <Poptip title="提示标题" content="提示内容" placement="bottom-end">
          <Button>下右</Button>
        </Poptip>
      </div>
    </div>
    <p>组件提供了12个不同的方向显示Poptip，具体配置可查看API。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;div&gt;
          &lt;div class=&quot;top&quot;&gt;
            &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;top-start&quot;&gt;
              &lt;Button&gt;上左&lt;/Button&gt;
            &lt;/Poptip&gt;
            &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;top&quot;&gt;
              &lt;Button&gt;上边&lt;/Button&gt;
            &lt;/Poptip&gt;
            &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;top-end&quot;&gt;
              &lt;Button&gt;上右&lt;/Button&gt;
            &lt;/Poptip&gt;
          &lt;/div&gt;
          &lt;div class=&quot;center&quot;&gt;
            &lt;div class=&quot;center-left&quot;&gt;
              &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;left-start&quot;&gt;
                  &lt;Button&gt;左上&lt;/Button&gt;
                &lt;/Poptip&gt;&lt;br&gt;&lt;br&gt;
                &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;left&quot;&gt;
                  &lt;Button&gt;左边&lt;/Button&gt;
                &lt;/Poptip&gt;&lt;br&gt;&lt;br&gt;
                &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;left-end&quot;&gt;
                  &lt;Button&gt;左下&lt;/Button&gt;
                &lt;/Poptip&gt;
            &lt;/div&gt;
            &lt;div class=&quot;center-right&quot;&gt;
              &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;right-start&quot;&gt;
                  &lt;Button&gt;右上&lt;/Button&gt;
                &lt;/Poptip&gt;&lt;br&gt;&lt;br&gt;
                &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;right&quot;&gt;
                  &lt;Button&gt;右边&lt;/Button&gt;
                &lt;/Poptip&gt;&lt;br&gt;&lt;br&gt;
                &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;right-end&quot;&gt;
                  &lt;Button&gt;右下&lt;/Button&gt;
                &lt;/Poptip&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;bottom&quot;&gt;
            &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;bottom-start&quot;&gt;
              &lt;Button&gt;下左&lt;/Button&gt;
            &lt;/Poptip&gt;
            &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;bottom&quot;&gt;
              &lt;Button&gt;下边&lt;/Button&gt;
            &lt;/Poptip&gt;
            &lt;Poptip title=&quot;提示标题&quot; content=&quot;提示内容&quot; placement=&quot;bottom-end&quot;&gt;
              &lt;Button&gt;下右&lt;/Button&gt;
            &lt;/Poptip&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {

            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>嵌套复杂内容</h2>
    <Poptip placement="right" width="400">
      <Button type="success">click 激活</Button>
      <div class="api" slot="content">
        <Table :columns="tableColumn" :data="tableData"></Table>
      </div>
    </Poptip>
    <p>通过自定义 slot 来实现复杂的内容。</p>
    <pre>
      &lt;template&gt;
        &lt;Poptip placement=&quot;right&quot; width=&quot;400&quot;&gt;
          &lt;Button type=&quot;success&quot;&gt;click 激活&lt;/Button&gt;
          &lt;div class=&quot;api&quot; slot=&quot;content&quot;&gt;
            &lt;Table :columns=&quot;tableColumn&quot; :data=&quot;tableData&quot;&gt;&lt;/Table&gt;
          &lt;/div&gt;
        &lt;/Poptip&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {

            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>确认框</h2>
    <Poptip
      confirm
      title="您确认删除这条内容吗？"
      ok-text="好的"
      cancel-text="再想想"
      @on-ok="ok"
      @on-cancel="cancel">
      <Button type="error">删除</Button>
    </Poptip>
    <p>通过设置属性 <code>confirm</code> 开启确认框模式。确认框只会以 <code>click</code> 的形式激活，并且只会显示 <code>title</code> 的内容，忽略 <code>content</code> 。</p>
    <pre>
      &lt;template&gt;
        &lt;Poptip
          confirm
          title=&quot;您确认删除这条内容吗？&quot;
          ok-text=&quot;好的&quot;
          cancel-text=&quot;再想想&quot;
          @on-ok=&quot;ok&quot;
          @on-cancel=&quot;cancel&quot;&gt;
          &lt;Button type=&quot;error&quot;&gt;删除&lt;/Button&gt;
        &lt;/Poptip&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {

            }
          },
          methods: {
            ok () {
              console.log('点击了确定');
            },
            cancel () {
              console.log('点击了取消');
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Poptip props</p>
    <Table :columns="tableColumn" :data="tableData1"></Table>
    <p>Poptip events</p>
    <Table :columns="tableColumn1" :data="tableData2"></Table>
    <p>Poptip slot</p>
    <Table :columns="tableColumn2" :data="tableData3"></Table>
  </div>
</template>

<script>
export default {
  name: '',
  components: {

  },
  data () {
    return {
      visible: false,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute',
          align: 'center'
        },
        {
          title: '说明',
          key: 'explain',
          align: 'center',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '默认值',
          key: 'default',
          align: 'center'
        }
      ],
      tableData: [
        {
          attribute: 'disabled',
          explain: '是否禁用提示框',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'delay',
          explain: '延迟显示，单位毫秒',
          type: 'Number',
          default: '0'
        }
      ],
      tableData1: [
        {
          attribute: 'trigger',
          explain: '触发方式，可选值为hover（悬停）click（点击）focus（聚焦）,在 confirm 模式下，只有 click 有效',
          type: 'String',
          default: 'click'
        },
        {
          attribute: 'title',
          explain: '显示的标题',
          type: 'String | Number',
          default: '-'
        },
        {
          attribute: 'content',
          explain: '显示的正文内容，只在非 confirm 模式下有效',
          type: 'String | Number',
          default: '空'
        },
        {
          attribute: 'placement',
          explain: '提示框出现的位置，可选值为top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end',
          type: 'String',
          default: 'top'
        },
        {
          attribute: 'width',
          explain: '宽度，最小宽度为 150px，在 confirm 模式下，默认最大宽度为 300px',
          type: 'String | Number',
          default: '-'
        },
        {
          attribute: 'confirm',
          explain: '是否开启对话框模式',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'ok-text',
          explain: '确定按钮的文字，只在 confirm 模式下有效',
          type: 'String',
          default: '确定'
        },
        {
          attribute: 'cancel-text',
          explain: '确定按钮的文字，只在 confirm 模式下有效',
          type: 'String',
          default: '取消'
        }
      ],
      tableColumn1: [
        {
          title: '名称',
          key: 'name',
          width: 210
        },
        {
          title: '说明',
          key: 'instruc'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData2: [
        {
          name: 'on-ok',
          instruc: '点击确定的回调，只在 confirm 模式下有效',
          callback: '无'
        },
        {
          name: 'on-cancel',
          instruc: '点击取消的回调，只在 confirm 模式下有效',
          callback: '无'
        }
      ],
      tableColumn2: [
        {
          title: '名称',
          key: 'name',
          width: 210
        },
        {
          title: '说明',
          key: 'instruc'
        }
      ],
      tableData3: [
        {
          name: '无',
          instruc: '主体内容'
        },
        {
          name: 'title',
          instruc: '提示框标题，定义此 slot 时，会覆盖 props title'
        },
        {
          name: 'content',
          instruc: '提示框内容，定义此 slot 时，会覆盖 props content，只在非 confirm 模式下有效'
        }
      ]
    }
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {

  },
  methods: {
    close () {
      this.visible = false
      console.log(this.visible)
    },
    ok () {
      this.$Message.info('点击了确定')
    },
    cancel () {
      this.$Message.info('点击了取消')
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 10px 0;
}
.top,.bottom{
  text-align: center;
  width: 500px;
}
.center{
  width: 300px;
  margin: 20px 100px;
  overflow: hidden;
}
.center-left{
  float: left;
}
.center-right{
  float: right;
}
</style>
